<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .body{
            margin: 0;
        }
        .tab-bar{
            display: flex;
            position: fixed ;
            bottom: 0;
            width: 100%;
            background-color: blanchedalmond;
        }
        .tab-bar-item{
            flex:1;
            text-align: center;
            font-size: 13px;
        }
        .tab-bar-item img{
            width:23px;
        }
    </style>
</head>
<body>
    <div id="app">
        <Tabbar :tabs="tabs"></Tabbar>
    </div>

    <template id="tabbar">
        <div>
            <div class="tab-bar">
                <div class="tab-bar-item" v-for="(item,index) in tabs" @click=itemClick(item,index) :style="{'background-color': curIndex==index ? 'red':'blanchedalmond'}">
                    <img :src="item.icon" alt="">
                    <div>{{item.name}}</div>
                </div>
                <!-- <div class="tab-bar-item">
                    <img src="./icon/cart.png" alt="">
                    <div>购物车</div>
                </div>
                <div class="tab-bar-item">
                    <img src="./icon/like.png" alt="">
                    <div>收藏</div>
                </div>
                <div class="tab-bar-item">
                    <img src="./icon/search.png" alt="">
                    <div>搜索</div>
                </div> -->
            </div>
        </div>
    </template>

    <script>
        const Tabbar=Vue.component('Tabbar',{
            template:'#tabbar',
            props:{
                tabs:{
                    type:Array,
                    default:[]
                }
            },
            data(){
                return {
                    curIndex:0,
                }
            },
            methods:{
                itemClick(item,index){
                    this.curIndex=index
                }
            }
        })
        new Vue({
            el:'#app',
            components:{
                Tabbar
            },
            data:{
                tabs:[
                    {name:'首页',icon:'./icon/首页.png',active:'1'},
                    {name:'购物车',icon:'./icon/cart.png',active:'1'},
                    {name:'收藏',icon:'./icon/like.png',active:'1'},
                    {name:'搜索',icon:'./icon/search.png',active:'1'},
                    {name:'清单',icon:'./icon/list.png',active:'1'},
                ]
            }
        })
    </script>
</body>
</html>